<#assign display=JspTaglibs["http://displaytag.sf.net/el"]>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="../scripts/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../scripts/jquery.tablesorter.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Print Students' Performance Comment form</title>

<link href="../styles/print.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 11pt; }
	
	#header { font-family: Arial; font-size: 10pt; font-weight: bold; }
	.logo { float: left; margin-right: 10px; }
	.header-text { float: left; margin: 0 0 0 10px; font-family: "times new roman"; font-weight: bold; }
	.header-text td { font-size: 10pt; }
	.header-text h1 { font-size: 20px; }
	.center { text-align: center; }
	.header-height { height: 130px; vertical-align: top; }
	.padright { text-align: right; padding-right: 100px; }
		
	#bodier { font-family: Arial; font-size: 12pt; }
	#bodier .info p { padding: 10px 0; }
	#bodier h2 { margin: 40px 0 0 120px; }
	#bodier .class-info p { margin: 20px 0 10px 120px; }
	
	table.lists { border: 1px solid #000; border-collapse: collapse; }
	table.lists td { padding: 8px 3px; border: 1px solid #000; }
	table.lists th { padding: 8px 5px; border: 1px solid #000; }
	
	.col01 { width: 35px; }
	.col02 { width: 160px; }
	.col03 { width: 60px; }
	.col04 { width: 80px; }
	.col05 { width: 55px; }
	
	#footer { font-family: Arial; font-size: 14pt; font-weight: bold; }
</style>

</head>
<body>
<#if (offerings?size > 0)>
<#list offerings as offering>
	<div class="pageA4l">
		<table cellpadding="0" cellspacing="1" height="95%" width="100%"><tr><td class="header-height">
		<div id="header">
			&nbsp;
			<div class="logo">
				<img src="../images/logoSGTech.jpg" />
			</div>
			<div style="float: right;" class="noprint">Khoảng cách: <select style="width: 100px;" onchange="changeSize(this.value);">
				<option value="5">Rất Nhỏ (SS)</option>
				<option value="8" selected="selected">Nhỏ (S)</option>
				<option value="10">Vừa (M)</option>
				<option value="15">Lớn (L)</option>
				<option value="20">Rất Lớn (L)</option>
			</select></div>
			<div class="header-text">
				<table><tr>
					<td colspan="3" nowrap><h1>TEST RESULT - ${offering.name!}, ${offering.shift.startTime?string('HH:mm')} - ${offering.shift.endTime?string('HH:mm')}</h1></td>
				</tr><tr>
					<td colspan="3" height="10"></td>
				</tr><tr>
					<td>Begin date: ${offering.startDate?string('dd/MM/yyyy')!}</td>
					<td width="30"></td>
					<td>Test date: ${(offering.midtermWrittenDate?string('dd/MM/yyyy'))!} & ${(offering.finalSpokenDate?string('dd/MM/yyyy'))!}</td>
				</tr><tr>
					<td>Finish date: ${offering.endDate?string('dd/MM/yyyy')!}</td>
					<td width="30"></td>
					<td>Teachers: 
						<#list offering.instructors as instructor>
							<#if (instructor.gender == 'FEMALE')>Ms. <#else>Mr. </#if>
							${instructor.firstName!}
							<#if (instructor_index != (offering.instructors?size - 1))> - </#if> 
						</#list>
					</td>
				</tr></table>
			</div>
			<br clear="left" />
		</div>
		</td></tr>
		
		<tr><td class="bodier-height">
		<div id="bodier">
			${request.setAttribute('members', offering.sortMembers)}
			<@display.table id="listTable" name="members" class="lists" style="width: 100%">
				<@display.column title="No." class="col01 center no"></@display.column>
				<@display.column title="First name" class="col02">${(listTable.receipt.student.lastName)!}</@display.column>
				<@display.column title="Last name" class="col03">${(listTable.receipt.student.firstName)!}</@display.column>
				<@display.column title="Nickname" class="col04">${(listTable.receipt.student.nickName)!}</@display.column>
				<@display.column title="Scores" class="col05"></@display.column>
				<@display.column title="Comments on Students' Performance" class="col06"></@display.column>
			</@display.table>
		</div>
		</td></tr>
		
		<tr><td>
		<div id="footer">
			<p class="padright">Instructor's signature</p>			
		</div>
		</td></tr></table>
	<div class="page-break"></div>
	</div>
</#list>
</#if>
</body>
<script>
init();
function init() {
	$(".lists").each(function(){
		var count = 1;
		var rows = $(this).find('tbody > tr'); 
		rows.each(function() {
			$(this).find('td.no').text(count++);
		});
	});
	
	/*$(".lists").tablesorter( {sortList: [[0,0], [1,0]]} );*/
}

function changeSize(size) {
	$(".lists td").each(function(){
		$(this).css({ padding: size + 'px 3px'});
	});
}
</script>
</html>